<template>
  <div class="app-container">
    <div
      id="mychart"
      class="echart"
      :style="{ float: 'left', width: '100%', height: '400px' }"
    />
  </div>
</template>

<script>
import { getStatistical } from '@/api/employment/getst.js'
// import { getStatistical } from '../../api/employment/employmentlist'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      getRes: {}
    }
  },
  mounted() {
    this.statistical()
  },
  methods: {
    statistical() {
      getStatistical().then((res) => {
        this.getRes.counterpartrRate = Math.floor(res.data.counterpartrRate * 100)
        this.getRes.coreCounterRate = Math.floor(res.data.coreCounterRate * 100)
        this.getRes.notCounterpartrRate = Math.floor(res.data.notCounterpartrRate * 100)
        console.log(this.getRes)

        const option = {
          title: {
            text: '常德职业技术学院就业统计' // 此处为写标题
          },
          tooltip: {},
          legend: {
            data: ['就业率(%)'] // 展示图形颜色所代表的的图
          },
          xAxis: {
            data: [
              '对口就业率',
              '高质量对口就业',
              '非对口就业率'
            ]
          },
          yAxis: {},
          series: [
            {
              name: '就业率(%)',
              type: 'bar', // 类型为柱状图
              data: [this.getRes.counterpartrRate, this.getRes.coreCounterRate, this.getRes.notCounterpartrRate]
            }
          ]
        }
        const myChart = echarts.init(document.getElementById('mychart')) // 图标初始化
        myChart.setOption(option) // 渲染页面
        // 随着屏幕大小调节图表
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      })
    }

  }
}
</script>

